<template>
	<yd-layout id='myStudy' class=''>
		<div class="list" v-show='learnList.length>0'>
			<yd-infinitescroll  :callback="getVideoLearnList" ref="infinitescrollDemo">
				<VideoList slot="list" class='index_video_list' :member='member' :dataList='learnList'></VideoList>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">没有更多数据了~~</span>

				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>
			
			<yd-backtop></yd-backtop>
		</div>
		<NoList v-show='learnList.length==0'>
				<img slot='img' src="../../assets/kong_2.png" alt="" />
			</NoList>
	</yd-layout>
</template>

<script>
	import VideoList from '../../components/VideoList/VideoList.vue'
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	export default {
		components: {
			[VideoList.name]: VideoList,
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]: BackTop,
		},
		data() {
			return {
				member:true,
				learnList: [],
				pageCount: 10,
				pageNum: 1,
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '学习记录'
			this.getVideoLearnList()
		},
		methods: {
			getVideoLearnList() {
				this.$root.ajax({
					name: 'video/learns',
					type:'get',
					params: {
						page: this.pageNum,
						count: this.pageCount,
					}
				}).then((d) => {
					for(let a = 0; a < d.data.video_list.length; a++) {
						d.data.video_list[a].newTime = this.$root.getDate(new Date(d.data.video_list[a].play_time * 1000))
					}
					this.learnList = [...this.learnList, ...d.data.video_list];
					if(this.learnList.length >= d.data.video_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum++;
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './myStudy.scss';
</style>